<template>
	<view>
	<!-- 新顶部 -->
	<view class="tabs" >
	<view class="wrapper" elevation="1px" >
		<view class="statusBar">
		    <view v-if="!paddingTop" :style="{height:height, 'background-color':bgColor, 'background-image':bgImage}"></view>
			<view v-else :style="{'padding-top':height}"></view>
		</view>
		<view class="nav" >
			<view class="title">
				<image v-if="navigatorType == 2" @click="goBack" class="leftIco" src="../../static/fanhui.png"></image>
				<view v-for="(item, index) in nviewTab" :key="index" @click="tabBarsClick(index, item)" style="float: left;width: 50%;">
					<text class="title-text"
						:class="[tabBarsCurr == index ? 'title-text-curr' : '']">{{ item.title }}</text>
				</view>
			</view>
		</view>
	</view>
		<view style="float: left;"  class="fenleis" >
			<view class="title2 "  style="width: 100%;justify-content: left;flex-wrap:wrap;padding: 10px;" v-if="nviewTab[tabBarsCurr].cate_list.length > 0">
				<text :key="cat_index" v-for="(cat,cat_index) in nviewTab[tabBarsCurr].cate_list" :data-type="cat.type" :data-id="cat.id" @tap="clickCatType" class="title-text2" :style="'font-size:22rpx;width: 130rpx;align-items: center;border-radius: 10px;margin-right: 5px; margin-bottom: 5px;' + (cat.id == cat_id ? 'border: 1px solid #FA0000;color:#FA0000;background:#ffffff;' : 'border: 1px solid #ffffff;color:#000;background:#ffffff;')">{{cat.title}}</text>
			</view>
		</view>
		
	</view>
	
	<!-- 新顶部 -->

	<view class="friendsCircle" :style="{'margin-top':frheight}" >
		<!-- <watermark></watermark> -->
		<!-- <friends-circle-top :cover="cover" :userInfo="userInfo" @userClick="userClick"></friends-circle-top> -->
		
		<view class="friendsCircle-content" :style="{'padding-top': tabBarsCurr==0 ? '15rpx;':' 0rpx'}">
			 <view class="friendsCircle-msgalert-box" v-if="tabBarsCurr==1 && topicReply.count && topicReply.count > 0" @click="gomsglist">
				<view class="friendsCircle-msgalert">
					<image class="friendsCircle-msgalert-img" :src="topicReply.portrait" mode="aspectFill"></image>
					<text class="friendsCircle-msgalert-text">{{ topicReply.count }}条新消息</text>
				</view>
			</view>
			<friends-circle-list-item ref="fcli" :content="content" v-if="content.length>0"></friends-circle-list-item>
			<view class="alertTips" v-else-if="queryParams.status!='loading'">
            <text v-if="tabBarsCurr==1">暂无好友圈</text>
            <text v-else>暂无素材</text>
            
            </view>
		</view>
		<uni-load-more v-show="content.length>9" :status="queryParams.status"></uni-load-more>
	</view>
	</view>
</template>

<script>
	import htmlParser from '@/common/html-parser'
	var nviewTab = [{
			title: '素材圈',
			type: 'baokuan',
			product: [], // 存放数据
			showView: 'default',
			refreshing: false,
			refreshText: '下拉可以刷新',
			loadingText: '加载中...',
			page: 1,
			limit: 10,
			isLoading: 0, //0无效果 1加载中 2没有了
			cate_list: [
				// {title:'宣传素材','type':'0'},
			]
		},
		{
			title: '好友圈',
			type: 'quanbu',
			product: [], // 存放数据
			showView: 'default',
			refreshing: false,
			refreshText: '下拉可以刷新',
			loadingText: '加载中...',
			page: 1,
			limit: 10,
			isLoading: 0,
			cate_list: []
		}
	];

export default {
	props:{
		bgColor : {
			type : String,
			default : "#FFFFFF"
		},
		bgImage:{
			type : String,
			default : "none"
		},
		paddingTop:{
			type:Boolean,
			default:false
		}
	},
	data() {
		return {
			queryParams: {
				refreshing: false,
				status: 'more',
				pageNum: 1,
				pageSize: 10
			},
            userInfo:{},
            cover:{ type: 'img', name: '', url: '' },
			content: [],
			cat_id:0,
			//
			tabBarsCurr: 0,
			nviewTab: nviewTab,
			height : '45px',
			frheight:''
			
		};
	},
	created:function(){
		var _self = this;
		const res = uni.getSystemInfoSync();
		//console.log(res);
		this.height   = (Math.round((750 / res.screenWidth) * res.statusBarHeight))+"rpx";
	},

	computed: {
		/*cover() {
			var cover = this.$store.state.userInfo.cover ? JSON.parse(this.$store.state.userInfo.cover) : { type: 'img', name: '', url: '' };
			return cover;
		},
		userInfo() {
			return this.$store.state.userInfo;
		},*/
		topicReply() {
			return this.$store.state.topicReply;
		},
		navigatorType() {
			return this.$store.state.navigatorType;
		}
	},
	methods: {
		viewLoad(){
			
			this.getUserinfo();
			this.getlist();
			this.catelist();
			
		},
		viewShow(){
			
			
		},
		viewRefresh(){
			this.queryParams.refreshing=true
			this.getlist();
		},
		viewBottom(){
			
			this.getlist();
		},
		viewScroll(e){
			this.$refs['fcli'].hidenTool();
		},
	   getUserinfo(){
	       this.$http.request({
				url: '/my/getUserInfo',
				success: (res) => {
					if (res.data.code == 200) {console.log(res.data.data);
						this.userInfo= res.data.data;
                        this.cover = this.userInfo.cover ? this.userInfo.cover : { type: 'img', name: '', url: '' };
                        console.log(this.cover);
					}
				},
				fail: (error) => {
				   
				}
			 });
	   },
	   tabBarsClick(index) {
		   console.log(87888);
			this.tabBarsCurr = index;
			this.content=[];
			this.queryParams.refreshing=false;
			this.queryParams.status= 'more';
			this.queryParams.pageNum=1;
			this.queryParams.pageSize=10;
			if(index==1){
				this.cat_id=0;
			}
			//this.queryParams.tabBarsCurr=index;
			this.getlist();
			
	   },
	   async  clickCatType(e){
	     	//console.log(44454555);
	     	var type = e.currentTarget.dataset.type;
	        var id = e.currentTarget.dataset.id;
		    this.content=[];
		    this.queryParams.refreshing=false;
		    this.queryParams.status= 'more';
		    this.queryParams.pageNum=1;
		    this.queryParams.pageSize=10;
	   		//console.log(id);
	   		this.cat_id=id;
	   		this.getlist();
	   		// console.log(this.nviewTab[this.tabBarsCurr].type);
	   		// console.log(id);
	   //   	if(type != this.nviewTab[this.tabBarsCurr].type){
	   //   		this.nviewTab[this.tabBarsCurr].type = type;
	   //   		this.getlist();
	   //   	}
	     },
	   catelist() {
	   	this.queryParams.status='loading'
	   	this.$fc.loadMore({
	   		url: '/topic/catelist?',
	   		queryParams: this.queryParams
	   	}).then(res => {
			console.log(res.list);
	   		if(res.list){
	   			this.nviewTab[0].cate_list = res.list;
				
	   		}
	   		
	   	});
	   },
	   shzhehigh(){
		   let that = this
		    let info = uni.createSelectorQuery().select(".fenleis");
		    info.boundingClientRect(function(data) { //data - 各种参数
		    console.log(that.tabBarsCurr);
			console.log(data); // 获取元素的相关信息
			if(that.tabBarsCurr==1){
				var ht=data.top;
				//that.frheight=ht;
			}else{
				
				var ht=data.top+data.height+10;//data.height;
				
			}
		   	that.frheight=ht+'px';
		   	console.log(that.frheight);
			console.log(2222);
		   	
		   	 // if (data.height > 210) {
		   		//  that.domWidth = '730rpx'
		   	 // } else {
		   		//  that.domWidth = '520rpx'
		   	 // }
		    }).exec() 
	   },
		getlist() {
			
			console.log(this.queryParams);
			this.queryParams.status='loading'
			this.$fc.loadMore({
				url: '/topic/topicList?tabBarsCurr='+this.tabBarsCurr+'&cat_id='+this.cat_id,
				queryParams: this.queryParams
			}).then(res => {
				console.log(res);
				this.$store.commit('update_topicRed',{})
				this.queryParams = res.queryParams;
				if (res.status=='3') {
					this.list=[]
					return
				}
				if (res.status=='0') {
					return
				}
				var rows = res.list;
				
				
				var list = [];
				for (var i = 0; i < rows.length; i++) {
					var item = rows[i];
					list.push({
						userId: item.topic.userId,
						nickName: item.topic.nickName,
						avatar: item.topic.portrait,
						topicId: item.topic.topicId,
						text: htmlParser(item.topic.content.replace(/\<img/gi,
							'<img style="max-width:100%;height:auto;" ')),//item.topic.content,
						topicType: item.topic.topicType,
						files: item.topic.files,
						location: item.topic.location ? JSON.parse(item.topic.location) : {},
						time: item.topic.createTime,
						type: item.topic.type,
						like: item.like,
						likeList: item.likeList,
						replyList: item.replyList,
						
					});
				}
				if(res.category){
					this.nviewTab[0].cate_list = res.category;
				}
				console.log(list);
				if (res.status=='2') {
					this.content = list;
				}
				if (res.status=='1') {
					this.content = this.content.concat(list);
				}
				this.$nextTick(() => {
				    this.shzhehigh();    
				 });
				
			});
		},
		userClick(cover, user) {
			uni.navigateTo({
				url: this.$fc.get_package_name()+'friendsCircle/person'
			});
		},
		gomsglist() {
			uni.navigateTo({
				url: this.$fc.get_package_name()+'friendsCircle/msglist'
			});
		},
		goBack(){
			uni.navigateBack();
		}
	},
};
</script>

<style scoped lang="scss">
.friendsCircle {
	
}

.friendsCircle-content {
	//padding-top: 10rpx;
	display: flex;
	flex-direction: column;
	position: relative;
}
.friendsCircle-msgalert-box {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.friendsCircle-msgalert {
	border-radius: 12rpx;
	background-color: #4c4c4c;
	padding: 14rpx 24rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
}
.friendsCircle-msgalert-img {
	width: 60rpx;
	height: 60rpx;
	min-width: 60rpx;
	border-radius: 12rpx;
	margin-right: 24rpx;
}
.friendsCircle-msgalert-text {
	color: #fff;
}
	// 新头部样式11
	.statusBar{
	    flex-direction: column;
	    flex: 1;
	}
	.status-bar {
		height: 60rpx;
		flex: 1;
		background-color: red;
	}
	
	.tabs {
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		background-color: #f5f5f5;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 999;
	}
	
	.wrapper {
		background-color: #ffffff;
		flex-direction: column;
		/* border-bottom-width: 1px;
		border-bottom-style: solid;
		border-bottom-color: #f6f6f6; */
	}
	
	.nav {
		width: 750rpx;
		/* 	flex: 1; */
		height: 88rpx;
		line-height: 88rpx;
		justify-content: center;
		align-items: center;
		display: flex;
		position: relative;
	}
	
	.title {
		width: 440rpx;
		justify-content: center;
		flex-direction: row;
		background-color: #f2f2f2;
		border-radius: 50rpx;
		height: 30px;
	    line-height: 30px;
	}
	.title2 {
		width: 440rpx;
		justify-content: center;
		flex-direction: row;
		background-color: #f2f2f2;
		border-radius: 50rpx;
	}
	
	.title-text {
		width: 240rpx;
		align-items: center;
		color: #99a2a8;
		// padding-top: 10rpx;
		// padding-bottom: 10rpx;
		font-size: 28rpx;
		text-align: center;
		display: block;
	}
	.title-text2 {
		width: 220rpx;
		align-items: center;
		color: #99a2a8;
		//padding-top: 10rpx;
		//padding-bottom: 10rpx;
		padding:10rpx;
		font-size: 28rpx;
		text-align: center;
	}
	
	.title-text-curr {
		color: white;
		border-radius: 50rpx;
		background-color: #fa0000;
	}
	
	.statusBar{
	    flex-direction: column;
	    flex: 1;
	}
	.leftIco{
		position: absolute;
		left: 20px;
		width: 18px;
		height: 18px;
		top: 13px;
		vertical-align: bottom;
	}
	.alertTips {
		line-height: 80rpx;
		background-color: #fcfcfc;
		color: #999999;
		text-align: center;
		font-size: 28rpx;
	}
</style>
